// 验证登录
const token = window.localStorage.getItem('token')
const id = window.localStorage.getItem('id')

if (!token || !id) {
  window.location.href = './login.html'
} else {
  // 请求商品列购物车数据, 进行渲染
  getCartList()
}

// 获取收藏列表
function getCartList() {
  // 发送请求
  $.ajax({
    url: 'http://localhost:8888/cart/list',
    method: 'GET',
    data: { id: id },
    headers: { authorization: token },
    success (res) {
      // 判断失败
      if (res.code !== 1) {
        window.location.href = './login.html'
        return
      }
      // 渲染页面
      bindHtml(res)
    }
  })
}

//渲染页面
function bindHtml(res) {
  console.log(res.info)
  // 判断渲染 empty 标签还是 list 标签
  if (res.info.length===0) {
    $('.empty').addClass('active')
    $('.list').removeClass('active')
    return
  }
  let selectNum = 0
  res.info.forEach(item => {
    if (item.is_select) {
      selectNum++
    }
  })
  //  渲染页面
  let str = `
    <div class="top">
      全选 <input id="top_sel" class="selectAll" type="checkbox" ${ selectNum === res.info.length ? 'checked' : '' }>
      <label for="top_sel"></label>
    </div>
    <ul class="center">
    `

    res.info.forEach(item => {
      str += `
        <li>
          <div class="select" id="sel">
            <input id="${ item.goods_id }" class="sel"name="sel"${item.is_select ? 'checked' : ''} type="checkbox" goodsId="${ item.goods_id }">
            <label for="${ item.goods_id }"></label>
          </div>
          <div class="show">
            <img src="${item.goods_img }" alt="">
          </div>
          <div class="title">
            ${ item.title }
          </div>
          <div class="createTime">
            发布时间：${ item.createTime.substring(0,10) }
          </div>
          <div class="price">￥ ${ item.price }</div>
          <div class="detail_goods">
            <button goodsId="${ item.goods_id }" class="det">详情</button>
          </div>
          <div class="destory">
            <button goodsId="${ item.goods_id }" class="del" is_select="${item.is_select}">删除</button>
          </div>
      `
    })
    str += `
      </li>
    </ul>
    <div class="bottom">
      <p>
        共计 <span>${ selectNum }</span> 件商品
      </p>
      <div class="btns">
        <button class="clear_complete" selectNum="${ selectNum === 0 ? 'false' : 'true' }">删除所有已选中</button>
      </div>
    </div>
  `

  $('.list').html(str)
}

// 各种点击事件
// 修改单一商品选中


$('.list').on('click', '.center .select input', function () {
  // 拿到对应的信息发送请求
  $.ajax({
    url: 'http://localhost:8888/cart/select',
    method: 'POST',
    headers: { authorization: token },
    data: { id: id, goodsId: $(this).attr('goodsId') },
    success (res) {
      console.log(res)
      window.location.reload()
    }
  })
  // 重新渲染页面
  getCartList()
})
// 转入详情页
$('.list').on('click', '.center .det', function () {
  window.localStorage.setItem("goodsId",$(this).attr('goodsId'));
  window.location.href='./detail.html'
})

// 删除单一商品
$('.list').on('click', '.center .del', function () {
  console.log(typeof($(this).attr('is_select')))
  if($(this).attr('is_select')==='1'){
    // 发送请求
    $.ajax({
      url: 'http://localhost:8888/cart/remove',
      method: 'GET',
      data: { id: id, goodsId: $(this).attr('goodsId') },
      headers: { authorization: token },
      success(res){
        window.location.reload()
      }
    })

    // 重新渲染页面
    getCartList()
  }else{
    alert("未选中")
  }

})

// 全选事件
$('.list').on('click', '.selectAll', function () {
  // 拿到自己的选中状态
  const type = $(this).prop('checked') ? 1 : 0

  // 发送请求进行修改
  $.ajax({
    url: 'http://localhost:8888/cart/select/all',
    method: 'POST',
    data: { id: id, type: type },
    headers: { authorization: token },
    success(res){
      window.location.reload()
    }
  })
  // 重新渲染页面
  getCartList()
})

//删除所有已选中
$('.list').on('click', '.clear_complete', function () {
  if($(this).attr('selectNum')==='true'){
      //发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/remove/select',
        method: 'GET',
        data: { id: id },
        headers: { authorization: token },
        success(res){
          window.location.reload()
        }
      })

    // 重新渲染页面
    getCartList()
  }else{
    alert('未选中')
  }
})
